
<template>
	<div>
		<InputOutputDefine
			v-if="props.frontFile"
			:versionId="props.id"
			:stepCode="props.nodeId"
			:topFlag="false"
			:resource="props.frontFile"
			:outputFlag="false"
			:inputFlag="true"
		>
		</InputOutputDefine>
		<a-row>
			<a-col span="12">
				<div ref="groovyContainer" style="width: 100%; height: 300px; text-align: left"></div>
			</a-col>
			<a-col span="0.5"> &nbsp;&nbsp; </a-col>
			<a-col span="11">
				<a-row>
					<a-col span="24">
						<Tag>测试参数</Tag>
						<a-button type="primary" style="float: right" @click="autoSetResultDefine">测试</a-button>
						<div class="jsoneditor" ref="jsonEditor" style="width: 100%; height: 270px"></div>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
		<a-row>
			<a-col span="24">
				<ParamDefine
					v-if="props.componentConfig?.config"
					:params="props.componentConfig.config.output"
					:isViewBasicFieldFlag="true"
					:isViewArrayFlag="true"
					:isAddColumnFlag="true"
					:jsonEditorFlag="true"
					:isImportFlag="true"
					:isUpdateColumnFlag="true"
					:isActionColumnFlag="true"
					:isRemoveColumnFlag="true"
					:isAddChildrenColumnFlag="true"
					:isMappingColumnFlag="false"
					ref="left"
					:height="230"
				></ParamDefine>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import { onMounted, ref, watch, inject, getCurrentInstance } from 'vue'
import { Message, Radio, Row, Switch } from 'view-ui-plus'
import processVersionContentApi from '@/api/process/processVersionContentApi'
import ParamDefine from '@/views/restapi/ParamDefine.vue'
import * as monaco from 'monaco-editor'
import JsonEditor from 'jsoneditor'
import 'jsoneditor/dist/jsoneditor.min.css'
import { parseDefineToJson, mergeStepConfigToFrontFile } from '@/utils'
import processTestApi from '@/api/process/processTestApi'

const defaultConfig = () => {
	return {
		config: {
			output: {
				params: [],
				basicTypeFlag: false,
				isArrayFlag: false,
				isActionColumnFlag: false,
				isMappingColumnFlag: false
			},
			params: {},
			scripts: `def main(args){


}`
		}
	}
}

const props = defineProps(['componentConfig', 'nodeId', 'id', 'frontFile'])
let monacoEditor = null
const groovyContainer = ref()

const left = ref()

onMounted(async () => {
	if (!hasProperties(props.componentConfig)) {
		const c = defaultConfig()
		props.componentConfig.config = c.config
	}
	initGroovy()
	openStepTestDraw()
})

const hasProperties = (obj) => {
	if (!obj) {
		return false
	}

	return JSON.stringify(obj) != '{}'
}

const autoSetResultDefine = async () => {
	//获取一把tid
	const tid = await processTestApi.getTid({})

	const value = paramEditor.get()
	props.componentConfig.params = value
	let frontFile = mergeStepConfigToFrontFile(props.frontFile,props.nodeId, props.componentConfig)
	console.log( props.componentConfig)
	const obj = await processTestApi.runWithResultToFieldDefine({
		id: props.id,
		frontFile: frontFile,
		param: value,
		stepCode: props.nodeId,
		tid: tid
	})
	if (!obj) {
		return
	}
	props.componentConfig.config.output = obj
	// config.value.stepTestFlag = true
}

const jsonEditor = ref()
let paramEditor = null

const openStepTestDraw = () => {
	// config.value.stepTestFlag = true
	//初始化
	if (!paramEditor) {
		nextTick(() => {
			initJsonEditor()
			updateTestParam()
		})
	} else {
		updateTestParam()
	}
}

const initJsonEditor = () => {
	const options = {
		modes: ['code', 'tree', 'form', 'text', 'preview'],
		mode: 'code'
	}
	paramEditor = new JsonEditor(jsonEditor.value, options)
}

const updateTestParam = async () => {
	const obj = await getCurrentInputDefine()
	let define = parseDefineToJson(obj)
	if (!define) {
		define = {
			'': ''
		}
	}
	paramEditor.update(define)
}

const getCurrentInputDefine = async () => {
	//需要调用后端查询接口定义
	const read = await processVersionContentApi.getCurrentInputDefine({
		id: props.id,
		frontFile: props.frontFile,
		stepCode: props.nodeId
	})
	return read
}

const initGroovy = () => {
	monacoEditor = monaco.editor.create(groovyContainer.value, {
		value: defaultConfig().config.scripts,
		language: 'java',
		theme: 'vs-dark', // 主题
		folding: true, // 是否折叠
		foldingHighlight: true, // 折叠等高线
		foldingStrategy: 'indentation', // 折叠方式  auto | indentation
		showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
		disableLayerHinting: true, // 等宽优化
		emptySelectionClipboard: false, // 空选择剪切板
		selectionClipboard: false, // 选择剪切板
		automaticLayout: true, // 自动布局
		codeLens: false, // 代码镜头
		scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
		colorDecorators: true, // 颜色装饰器
		accessibilitySupport: 'off', // 辅助功能支持  "auto" | "off" | "on"
		lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
		lineNumbersMinChars: 5, // 行号最小字符   number
		enableSplitViewResizing: false,
		readOnly: false //是否只读  取值 true | false
	})
	// 编辑监听
	monacoEditor.onDidChangeModelContent(() => {
		const calue = monacoEditor.getValue()
		props.componentConfig.config.scripts = calue
	})

	if (props.componentConfig.config.scripts) {
		monacoEditor.setValue(props.componentConfig.config.scripts)
	}
}
</script>


<style scoped></style>
